<template>
	<div class="home-page">
		<div class="content">
			<h1 class="title">KuaiDa NewPage</h1>
			<div class="search-box">
				<select v-model="selectedEngine">
					<option value="baidu">Baidu</option>
					<option value="google">Google</option>
					<option value="bing">Bing</option>
					<option value="yahoo">Yahoo</option>
					<option value="duckduckgo">DuckDuckGo</option>
				</select>
				<input type="text" v-model="keyword" placeholder="Search...">
				<button @click="search">Search</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selectedEngine: 'baidu',
				keyword: ''
			}
		},
		methods: {
			search() {
				const urlMap = {
					baidu: 'https://www.baidu.com/s?wd=',
					google: 'https://www.google.com/search?q=',
					bing: 'https://www.bing.com/search?q=',
					yahoo: 'https://search.yahoo.com/search?p=',
					duckduckgo: 'https://duckduckgo.com/?q='
				}
				const url = urlMap[this.selectedEngine] + encodeURIComponent(this.keyword)
				window.open(url, '_blank')
			}
		}
	}
</script>

<style scoped>
	.home-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 1rem);
		background-color: #007BFF;
	}

	.content {
		text-align: center;
		height: 100%;
	}

	.title {
		font-size: 3rem;
		margin-bottom: 2rem;
		color: #fff;;
	}

	.search-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search-box select {
		height: 2.5rem;
		margin-right: 1rem;
		border: none;
		border-radius: 0.25rem;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding-left: 10px;
		width: 25%;
		max-width: 30rem;
	}

	option {
		text-align: center;
	}

	.search-box input {
		height: 2.5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		width: 80%;
		max-width: 30rem;
		border: none;
		border-radius: 0.25rem;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	}

	.search-box button {
		height: 2.6rem;
		padding-left: 1rem;
		padding-right: 1rem;
		margin-top: 1rem;
		color: white;
		background-color: black;
		border: none;
		border-radius: 0.25rem;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	}

	.search-box button:hover {
		cursor: pointer;
		background-color: gray;
	}

	@media screen and (min-width: 768px) {
		.content {
			width: 50%;
			max-width: 40rem;
		}

		.search-box {
			flex-direction: row;
		}

		.search-box input {
			width: 50%;
			max-width: 20rem;
			margin-right: 1rem;
		}

		.search-box button {
			margin-top: ;
		}
	}
</style>
